<template>
	<view class="addGoods">
		<view class="goods-name">
			<text>商品名称</text>
			<input class="uni-input-goods-name" v-model="goodsName" placeholder="请输入商品名称" />
		</view>

		<view class="goods-type">
			<text>商品类型</text>
			<!-- <input class="uni-input-goods-name" type="number" v-model="typeName" placeholder="请选择商品类型" /> -->
			<picker @change="bindPickerChangeType" :value="indexType" :range="goodsCateName" placeholder="请选择商品类型">
				<view class="type-name">
					<!-- {{ (goodsTypeName != '') ? goodsTypeName : goodsCateName[indexType]}} > -->
					{{goodsCateName[indexType]}} >
				</view>
			</picker>

		</view>

		<view class="goods-settle">
			<text>结算价</text>
			<input class="uni-input-goods-name" v-model="settle" placeholder="请输入结算价" />
		</view>

		<view class="goods-unit">
			<text>商品单位</text>
			<picker @change="bindPickerChangeUnit" :value="indexUnit" :range="goodsUnitList" placeholder="请选择商品类型">
				<view class="unit-name">
					{{goodsUnitList[indexUnit]}} >
				</view>
			</picker>
		</view>

		<view class="goods-specs">
			<text>商品规格</text>
			<input class="uni-input-goods-name" v-model="specs" placeholder="请输入商品规格" />
		</view>

		<view class="goods-status">
			<text>商品状态</text>
			<!-- <input class="uni-input-goods-name" type="number" v-model="settle" placeholder="请输入商品规格" /> -->
			<uni-data-checkbox class="uni-status-goods-name" v-model="value" :localdata="status"
				@change="changeBox"></uni-data-checkbox>
		</view>


		<view class="goods-button">
			<button type="primary" @click="addData">确认添加</button>
		</view>

	</view>



</template>

<script>
	import ajax from '@/api/api.js'
	import url from '@/api/url.js'
	export default {
		data() {
			return {
				id: '',
				goodsName: '', //商品名称
				// goodsTypeName: '', //商品类型名称

				indexType: 0, //选中的下标
				goodsCateName: [], //存放商品类型名字
				goodsCateIdList: [], //存放商品类型id
				typeId: 0,

				settle: '', //结算价

				indexUnit: 0, //
				goodsUnitList: [], //存放商品单位
				goodsUnitIdList: [], //存放商品单位id
				unitId: 0,

				specs: '', //商品规格

				value: 1,
				status: [{
						text: '上架',
						value: 1
					},
					{
						text: '下架',
						value: 2
					}
				]

			}
		},
		//点击编辑 进来获取传过来的
		onLoad(options) {
			this.getData()
			console.log("options", options)
			this.id = options.id
			this.goodsName = options.goods_name
			// this.goodsTypeName = options.goods_cate_name
			this.typeId = options.goods_cate //商品类型id
			this.settle = options.shop_price //结算价
			this.unitId = options.goods_unit
			this.specs = options.goods_spec
			this.value = parseInt(options.status)
		},
		methods: {
			changeBox(e) {
				console.log(e)
				this.value = e.detail.value
				console.log(this.value)
			},
			addData() {
				console.log("添加数据")
				if (this.goodsName.length === 0) {
					uni.showToast({
						title: "请输入商品名称",
						icon: 'none'
					})
					return
				}

				if (this.settle.length === 0) {
					uni.showToast({
						title: '请输入结算价',
						icon: 'none'
					})
					return
				}

				if (this.specs.length === 0) {
					uni.showToast({
						title: '请输入商品规格',
						icon: 'none'
					})
					return
				}

				console.log('id', this.id)
				console.log('status', this.value)
				console.log('shop_price', this.settle)
				console.log('market_price', '')
				console.log('goods_name', this.goodsName)
				console.log('goods_cate', this.typeId)
				console.log('goods_unit', this.unitId)
				console.log('goods_spec', this.specs)


				this.$londing();
				ajax(url.goodsEdit, {
					data: {
						id: this.id,
						status: this.value,
						shop_price: this.settle,
						market_price: '',
						goods_name: this.goodsName,
						goods_cate: this.typeId,
						goods_unit: this.unitId,
						goods_spec: this.specs,
					}
				}).then(res => {
					console.log('添加商品=====', res)

					if (res.data.code === 1) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						this.$eventBus.$emit('addData', 13);

						setTimeout(function() {
							uni.navigateBack()
						}, 1500);

					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}



				}).catch(err => {
					console.error(err)
					uni.showToast({
						title: '服务器故障,请稍后再试',
						icon: 'none'
					})
				})

			},

			getData() {
				this.$londing();
				ajax(url.goodsDetail, {
					data: {
						id: '',
					}
				}).then(res => {
					console.log(res.data)
					console.log('详情', res.data.data.goods_cate)
					var cats = res.data.data.goods_cate
					for (var i = 0; i < cats.length; i++) {
						this.goodsCateName.push(cats[i].name);
						this.goodsCateIdList.push(cats[i].id);
					}
					var unit = res.data.data.goods_unit
					for (var i = 0; i < unit.length; i++) {
						this.goodsUnitList.push(unit[i].name);
						this.goodsUnitIdList.push(unit[i].id);
					}

					console.log(this.goodsCateName)
					console.log(this.goodsCateIdList)
					console.log(this.goodsUnitList)
					console.log(this.goodsUnitIdList)

					// this.goodsCateName = res.data.data.goods_cate
					// console.log(this.goodsCateName)

				}).catch(err => {
					console.log(err)
					uni.showToast({
						title: '服务器故障,请稍后再试',
						icon: 'none'
					})
				})


			},
			//选择的类型
			bindPickerChangeType: function(e) {
				console.log('picker发送选择改变,携带值为', e.detail.value)
				this.indexType = e.detail.value
				this.typeId = this.goodsCateIdList[this.indexType]
				console.log('this.typeId:' + this.typeId)
			},
			//选择的单位
			bindPickerChangeUnit: function(e) {
				console.log('picker发送选择改变,携带值为', e.detail.value)
				this.indexUnit = e.detail.value
				this.unitId = this.goodsUnitIdList[this.indexUnit]
				console.log('this.unitId:' + this.unitId)
			},
		},
	}
</script>

<style lang="scss">
	.addGoods {
		.goods-name {
			background: white;
			margin-top: 30rpx;
			padding: 0 30rpx;
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			border-bottom: 1px solid #eee;

			text:nth-child(1) {}

			.uni-input-goods-name {
				margin-top: 20rpx;
				text-align: right;
				color: #333333;
			}
		}

		.goods-type {
			background: white;
			// margin-top: 30rpx;
			padding: 0 30rpx;
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			border-bottom: 1px solid #eee;

			text:nth-child(1) {}

			.type-name {
				margin-top: 15rpx;
				font-size: 16px;

			}
		}

		.goods-settle {
			background: white;
			// margin-top: 30rpx;
			padding: 0 30rpx;
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			border-bottom: 1px solid #eee;

			text:nth-child(1) {}

			.uni-input-goods-name {
				margin-top: 20rpx;
				text-align: right;
			}
		}

		.goods-unit {
			background: white;
			// margin-top: 30rpx;
			padding: 0 30rpx;
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			border-bottom: 1px solid #eee;

			text:nth-child(1) {}

			.unit-name {
				margin-top: 15rpx;
				font-size: 16px;

			}
		}

		.goods-specs {
			background: white;
			// margin-top: 30rpx;
			padding: 0 30rpx;
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			border-bottom: 1px solid #eee;

			text:nth-child(1) {}

			.uni-input-goods-name {
				margin-top: 20rpx;
				text-align: right;
			}
		}

		.goods-status {
			background: white;
			// margin-top: 30rpx;
			padding: 0 0 0 30rpx;
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			border-bottom: 1px solid #eee;

			text:nth-child(1) {}

			.uni-status-goods-name {
				padding-left: 350rpx;
				padding-top: 15rpx;

			}
		}

		.goods-button {
			line-height: 98rpx;
			margin-top: 50rpx;

			button {
				padding-top: 10rpx;
				width: 100%;
				height: 98rpx;
			}
		}

	}
</style>